
<template>
    <!--  原生摄像头-->
    <div class="flex-containers">
        <div class="flex-container">
            <div class="box-card2" style="display: inline-block; margin-top: 10px; margin-left: 10px">
                <div class="wrap-container sn-container" style="width: 1000px; height: 700px; margin-top: 20px">
                    <div class="sn-content">
                        <span style=" font-size: 35px; margin-top: 20%; margin-bottom: -25px; top: 0%; color: #00c2ff;">
                            <img src="../assets/雷达图.png" style="margin-right: 10px; margin-left: 10px; margin-top: 10px" />
                            <span>雷达雾区展示图</span>
                        </span>

                        <div class="chartsdom" id="main_Wu"></div>
                    </div>
                </div>
            </div>

            <div class="box-card2" style="display: inline-block; margin-top: 10px; margin-left: 1%">
                <div class="wrap-container sn-container" style="width: 1000px; height: 700px; margin-top: 20px; ">


                    <div class="sn-content" style="">
                        <span style=" font-size: 35px; margin-top: 20%; margin-bottom: -25px; top: 0%; color: #00c2ff;">
                            <img src="../assets/路径规划.png" style="margin-right: 10px; margin-left: 10px; margin-top: 10px" />
                            <span>实时路径规划</span>
                        </span>


                        <div class="box" style=" margin-top: 5% ; width: 1000px; height: 600px; ">
                            <video id="videoCamera" class="canvas" style="margin-left: 0px;" :width="1000"></video>
                            <canvas id="canvasArrow" class="canvas" :width="1000" :height="600"></canvas>
                            <!-- <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas> -->
                        </div>


                    </div>



                </div>

            </div>
        </div>

        <div class="flex-containers">
            <div class="flex-container">
                <div class="box-card" style="display: inline-block; margin-top: 10px; margin-left: 10px">
                    <div slot="header" class="clearfix">
                        <span></span>
                        <el-button type="primary" style="margin-left: 55px" @click="openSerial">打开串口</el-button>
                        <dynamicLine ref="child" />
                    </div>

                    <div id="main2"></div>
                </div>
                <div class="box-card" style="display: inline-block; margin-top: 10px; margin-left: 10px">
                    <div slot="header" class="clearfix">
                        <!-- <span style="font-size: 40px;color: rgb(75, 202, 202);margin-left: 25%;"></span> -->
                    </div>
                    <div id="main3" style="align-items: center; justify-items: center">
                        <waterPolo ref="child1" />
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="button" @click="goBaiduMap" style="width: 150px; margin-top: 30px">
            前往导航
        </button>

        <baidu-map class="bm-view" :center="{ lng: 120.300366, lat: 30.177844 }" :zoom="20" mapType="BMAP_NORMAL_MAP">
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-marker :position="{ lng: 120.3003, lat: 30.17737 }" :dragging="true"
                animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
        </baidu-map>
      

        <!-- <baidu-map class="bm-view" center="北京" >
  </baidu-map> -->
    </div>
</template>

<script>
import * as echarts from "echarts";
import waterPolo from "@/components/waterPolo.vue";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import dynamicLine from "@/components/dynamicLine.vue";
const x = 40; // 箭头的x坐标
const y = 190; // 箭头的y坐标
let receivedData = "";
let showData = [];

var min_data = 99;

const days = [
    "0 m",
    "1 m",
    "2 m",
    "3 m",
    "4 m",
    "5 m",
    "6 m",
    "7 m",
    "8 m",
    "9 m",
    "10 m",
    "11 m",
    "12 m",
];
var myChart_Wu;
const Wu_data = [
    // 距离-角度-质量
    [0, 0, 5],
    [0, 1, 1],
    [0, 2, 0],
    [0, 3, 17],
    [0, 4, 0],
    [0, 5, 0],
    [6, 16, 0],
    [6, 17, 0],
    [6, 18, 0],
    [6, 19, 0],
    [6, 20, 1],
    [6, 21, 2],
    [6, 90, 2],
    [6, 23, 6],
];


//  showData: []
export default {
    components: {
        BaiduMap,
        waterPolo,
        dynamicLine,
    },
    mounted() {
        var chartDom_Wu = document.getElementById("main_Wu");
        myChart_Wu = echarts.init(chartDom_Wu, "dark");

        var option_Wu;

        // prettier-ignore
        const hours = [
            '1', '2', '3', '4', '5', '6',
            '7', '8', '9', '10', '11',
            '12', '13', '14', '15', '16', '17',
            '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29',

            '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '100', '101', '102', '103', '104', '105', '106', '107', '108', '109', '110', '111', '112', '113', '114', '115', '116', '117', '118', '119', '120', '121', '122', '123', '124', '125', '126', '127', '128', '129', '130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '140', '141', '142', '143', '144', '145', '146', '147', '148', '149', '150', '151', '152', '153', '154', '155', '156', '157', '158', '159', '160', '161', '162', '163', '164', '165', '166', '167', '168', '169', '170', '171', '172', '173', '174', '175', '176', '177', '178', '179', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189', '190', '191', '192', '193', '194', '195', '196', '197', '198', '199', '200', '201', '202', '203', '204', '205', '206', '207', '208', '209', '210', '211', '212', '213', '214', '215', '216', '217', '218', '219', '220', '221', '222', '223', '224', '225', '226', '227', '228', '229', '230', '231', '232', '233', '234', '235', '236', '237', '238', '239', '240', '241', '242', '243', '244', '245', '246', '247', '248', '249', '250', '251', '252', '253', '254', '255', '256', '257', '258', '259', '260', '261', '262', '263', '264', '265', '266', '267', '268', '269', '270', '271', '272', '273', '274', '275', '276', '277', '278', '279', '280', '281', '282', '283', '284', '285', '286', '287', '288', '289', '290', '291', '292', '293', '294', '295', '296', '297', '298', '299', '300', '301', '302', '303', '304', '305', '306', '307', '308', '309', '310', '311', '312', '313', '314', '315', '316', '317', '318', '319', '320', '321', '322', '323', '324', '325', '326', '327', '328', '329', '330', '331', '332', '333', '334', '335', '336', '337', '338', '339', '340', '341', '342', '343', '344', '345', '346', '347', '348', '349', '350', '351', '352', '353', '354', '355', '356', '357', '358', '359', '360'

        ];

        option_Wu = {
            title: {
                text: " ",
            },
            legend: {
                data: ["Punch Card"],
                left: "right",
            },
            polar: {
                angle: 360,
                radius: 300,
            },
            tooltip: {
                formatter: function (params) {
                    return (
                        params.value[2] +
                        " commits in " +
                        hours[params.value[1]] +
                        " of " +
                        days[params.value[0]]
                    );
                },
            },
            angleAxis: {
                type: "category",
                data: hours,
                boundaryGap: false,
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                },
            },

            // 表示中轴
            radiusAxis: {
                axisTick: {
                    length: 30,
                    lineStyle: {
                        type: "dashed",
                        // ...
                    },
                },

                type: "category",
                data: days,
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    rotate: 0,
                    interval: "",
                },
            },
            series: [
                {
                    name: "Punch Card",
                    type: "scatter",
                    coordinateSystem: "polar",
                    showSymbol: false,
                    symbolSize: function (val) {
                        return val[2] * 2;
                    },
                    data: Wu_data,
                    animationDelay: function (idx) {
                        return idx * 5;
                    },
                },
            ],
        };

        option_Wu && myChart_Wu.setOption(option_Wu);

        // 在组件挂载后，开始绘制箭头

        var Color = "green";
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;
        // 实时数据化、话要改这各函数，把getData()的逻辑放进这个函数。替换value的值
        // 把data_sensor赋值给value
        function randomData() {
            now = new Date(+now + oneDay); // Date 对象转换为毫秒数，然后进行加法操作
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
                    Math.round(value), // 用于将一个浮点数或数字四舍五入为最接近的整数
                ],
            };
        }

        // 雨量数据初始化
        let data = [];
        let now = new Date(2023, 10, 22); // 当前的日期和时间
        let oneDay = 24 * 3600 * 10000; // 一天的毫秒数
        let value = Math.random() * 1000;
        // 这个改变的是变化的步长，长度 初始的数据
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }

        option = {
            animation: false,


            yAxis: [
                {
                    type: "value",
                    max: 140,
                    axisLine: {
                        show: true,
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                },
                {
                    type: "value",
                    max: 140,
                    axisLine: {
                        show: true,
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                },
            ],
            visualMap: {
                show: false,
                dimension: 1,
                pieces: [
                    {
                        gte: 5,
                        lte: 50, // 过了50就会变颜色
                        color: "#0BD2C8",
                    },
                    {
                        gt: 95,
                        color: "#f97f7f",
                    },
                    // {
                    //   lt: 50,
                    //   color: "#f97f7f",
                    // },
                ],
            },
            series: [
                {
                    type: "line",
                    symbol: "none",
                    markLine: {
                        symbol: "none",
                        emphasis: {
                            disabled: true,
                        },
                        data: [
                            {
                                silent: false,
                                lineStyle: {
                                    type: "dashed",
                                    color: "#7d888b",
                                    opacity: 0.5,
                                },
                                label: {
                                    show: false,
                                },
                                yAxis: 140,
                            },
                            {
                                silent: false,
                                lineStyle: {
                                    type: "dashed",
                                    color: "#7d888b",
                                    opacity: 0.5,
                                },
                                label: {
                                    show: false,
                                },
                                yAxis: 95.1,
                            },
                            {
                                silent: false,
                                lineStyle: {
                                    type: "dashed",
                                    color: "#7d888b",
                                    opacity: 0.5,
                                },
                                label: {
                                    show: false,
                                },
                                yAxis: 50,
                            },
                        ],
                    },
                    data: this.hrdata,
                    markArea: {
                        itemStyle: {
                            color: "#003b41",
                        },
                        data: [
                            [
                                {
                                    yAxis: 50,
                                },
                                {
                                    yAxis: 95,
                                },
                            ],
                        ],
                    },
                },
            ],

            tooltip: {
                // 配置提示框的部分
                trigger: "axis",
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return (
                        date.getDate() +
                        "/" +
                        (date.getMonth() + 1) +
                        "/" +
                        date.getFullYear() +
                        " : " +
                        params.value[1]
                    );
                },
                axisPointer: {
                    animation: false,
                },
            },
            // 坐标轴样式设置
            xAxis: {
                type: "time",
                splitLine: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                boundaryGap: [0, "100%"],
                splitLine: {
                    show: true,
                },
            },
            series: [
                // 设置曲线的样式
                {
                    name: "Fake Data",
                    type: "line",
                    showSymbol: false,
                    data: data,
                    color: Color,
                },
            ],
        };
        option && myChart.setOption(option);
    },

    name: "camera",
    data() {
        return {
            Location: "重庆交通大学",
            center: { lng: 0, lat: 0 },

            zoom: 3,
            os: false, //控制摄像头开关
            thisVideo: null,
            thisContext: null,
            imgSrc: "",
            videoWidth: 700,
            videoHeight: 400,
            value: [],
        };
    },
    created() { },
    methods: {
        goBaiduMap() {
            // 在 "baidu-map" 区域内加载新页面
            const iframe = document.createElement("iframe");
            iframe.src =
                "http://api.map.baidu.com/geocoder?address=" +
                this.Location +
                "&output=html&src=我的位置";
            iframe.style.width = "100%";
            iframe.style.height = "100%";
            document.querySelector(".bm-view").innerHTML = "";
            document.querySelector(".bm-view").appendChild(iframe);
        },
        handler({ BMap, map }) {
            console.log(BMap, map);
            this.center.lng = 116.404;
            this.center.lat = 39.915;
            this.zoom = 15;
        },


        // 角度-横-纵  横0-1000 纵0-570  中心 500 285  
        drawArrow(dir, directionDegrees, X, Y) {
            const video = document.getElementById("videoCamera");
            const canvas = document.getElementById("canvasArrow");
            const ctx = canvas.getContext("2d");
            const arrowSize = 40; // 箭头的大小

            // 在视频每一帧播放时执行绘制箭头的操作
            function draw() {
                if (dir == 1) {
                    // 清空画布
                    ctx.clearRect(0, 0, canvas.width + 100, canvas.height);

                    ctx.fillStyle = "green"; // 箭头填充颜色
                    // 设置箭头的起始点
                    let startX = X;
                    let startY = Y;

                    // 计算箭头的结束点（根据传入的角度）
                    let length = 1;
                    let endX =
                        startX +
                        length * Math.cos(((directionDegrees - 90) * Math.PI) / 180);
                    let endY =
                        startY +
                        length * Math.sin(((directionDegrees - 90) * Math.PI) / 180);

                    // 绘制箭头
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(endX, endY);
                    //   ctx.stroke();

                    // 绘制箭头头部
                    let arrowHeadSize = 60;

                    let angle1 = ((directionDegrees - 150) * Math.PI) / 180;
                    let angle2 = ((directionDegrees - 210) * Math.PI) / 180;
                    let arrowHeadX1 = endX + arrowHeadSize * Math.cos(angle1);
                    let arrowHeadY1 = endY + arrowHeadSize * Math.sin(angle1);
                    let arrowHeadX2 = endX + arrowHeadSize * Math.cos(angle2);
                    let arrowHeadY2 = endY + arrowHeadSize * Math.sin(angle2);

                    // 设置箭头指向的那一端的线条粗细
                    ctx.lineWidth = 3;
                    // 在箭头末端坐标处绘制一个圆形标记
                    let markerRadius = 10; // 圆形标记的半径
                    ctx.beginPath();
                    ctx.arc(endX, endY, markerRadius, 0, Math.PI * 2); // 绘制一个圆形
                    ctx.fillStyle = "green"; // 填充颜色为红色
                    ctx.fill(); // 填充圆形

                    ctx.beginPath();
                    ctx.moveTo(endX, endY);
                    ctx.lineTo(arrowHeadX1, arrowHeadY1);
                    ctx.lineTo(arrowHeadX2, arrowHeadY2);
                    ctx.closePath();
                    ctx.fill();
                }

                if (dir == -1) {
                    // 设置箭头的颜色和线条属性
                    context.fillStyle = "red"; // 箭头填充颜色
                    context.strokeStyle = "blue"; // 箭头边框颜色
                    context.lineWidth = 29; // 边框宽度

                    // 填充箭头并描边
                    context.fill();
                    context.stroke();
                    // 角度（以弧度表示），这里设置为180度
                    // const rotationAngle = 0.3 * Math.PI;

                    // 绘制箭头和矩形（旋转后）
                    context.save(); // 保存当前变换状态

                    // 在箭头和矩形的中心点旋转
                    // context.translate(x, y);
                    // context.rotate(rotationAngle);
                    // 绘制指路箭头
                    let x_py = 100;
                    let y_py = 30;
                    context.beginPath();
                    context.moveTo(x + x_py, y + y_py);
                    context.lineTo(x + arrowSize + x_py, y - arrowSize + y_py);
                    context.lineTo(x + arrowSize + x_py, y + arrowSize + y_py);
                    context.lineTo(x + x_py, y + y_py); // 回到起点形成闭合路径

                    // 设置箭头的颜色和线条属性
                    context.fillStyle = "green"; // 箭头填充颜色
                    // context.strokeStyle = "blue"; // 箭头边框颜色
                    context.lineWidth = 2; // 边框宽度

                    // 填充箭头bu描边
                    context.fill();
                    // context.stroke();
                    // 绘制矩形（位于箭头后面）
                    context.beginPath();
                    context.rect(x + arrowSize + x_py, y - 20 + y_py, 80, 40); // 调整矩形的位置和大小，位于箭头后面
                    context.fillStyle = "green"; // 矩形填充颜色
                    // context.strokeStyle = "blue"; // 矩形边框颜色
                    context.lineWidth = 2; // 边框宽度

                    // 填充矩形bu描边
                    context.fill();

                }
            }
            // }

            // 启动绘制箭头的循环
            draw();
        },






        planning_path() {



            let minQuality = Infinity;
            let minAngle;
            let minDistance;

            // 遍历数组
            for (const data of Wu_data) {
                const distance = data[0];
                const angle = data[1];
                const quality = data[2];

                // 如果当前项的质量小于最小质量，更新最小质量和对应的角度和距离
                if (quality < minQuality) {
                    minQuality = quality;
                    minAngle = angle;
                    minDistance = distance;
                }
            }
            minAngle += 90;
            // 视角后面
            // if (minAngle > 180) {
            //     return;
            // }



            // console.log(`最小质量：${minQuality}`);
            // console.log(`对应的角度：${minAngle}`);
            // console.log(`对应的距离：${minDistance}`);



            // 最大13 分出来了以后乘 220
            minDistance = minDistance / 13 * 220;





            let radians = (minAngle * Math.PI) / 180;
            let x = 500 - minDistance * Math.cos(radians);
            let y = 285 - minDistance * Math.sin(radians);




            this.drawArrow(1, minAngle, x, y);

        },



        // 重新登陆解决接收不到数据的问题
        getData(r) {
            showData.push(r);
            const mainDiv = document.getElementById("main2");
            // 如果 code 不等于 "0"，将错误信息以数组形式展示并在每个数组元素后添加换行
            // 你也可以添加更多的错误信息
            // 输出数组中的所有数据
            const errorMessagesWithBreak = showData
                .map((message) => message + "<br>")
                .join("");
            mainDiv.innerHTML = errorMessagesWithBreak;

            // 如果数组长度超过一定值（这里假设为 5），则删除最旧的数据
            if (showData.length > 5) {
                showData.shift(); // 删除最旧的数据
            }

        },
        // 设置定时器，每隔一定的时间（例如1秒）调用getData函数，在这里面添加上传数据的函数即可
        startInterval() {
            this.intervalId = setInterval(() => {
                this.getData();
            }, 10); // 1秒钟执行一次

        },


        // 调用摄像头权限
        openCamera() {
            // 每隔一秒规划一下
            setInterval(this.planning_path, 1000);


            //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点
            this.$nextTick(() => {
                const _this = this;
                this.os = false; //切换成关闭摄像头
                this.thisVideo = document.getElementById("videoCamera");
                // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
                if (navigator.mediaDevices === undefined) {
                    navigator.mediaDevices = {};
                }
                // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
                // 使用getUserMedia，因为它会覆盖现有的属性。
                // 这里，如果缺少getUserMedia属性，就添加它。
                if (navigator.mediaDevices.getUserMedia === undefined) {
                    navigator.mediaDevices.getUserMedia = function (constraints) {
                        // 首先获取现存的getUserMedia(如果存在)
                        let getUserMedia =
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.getUserMedia;
                        // 有些浏览器不支持，会返回错误信息
                        // 保持接口一致
                        if (!getUserMedia) {
                            return Promise.reject(
                                new Error("getUserMedia is not implemented in this browser")
                            );
                        }
                        // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                        return new Promise(function (resolve, reject) {
                            getUserMedia.call(navigator, constraints, resolve, reject);
                        });
                    };
                }
                const constraints = {
                    audio: false,
                    video: {
                        width: _this.videoWidth,
                        height: _this.videoHeight,
                        transform: "scaleX(-1)",
                    },
                };
                navigator.mediaDevices
                    .getUserMedia(constraints)
                    .then(function (stream) {
                        // 旧的浏览器可能没有srcObject
                        if ("srcObject" in _this.thisVideo) {
                            _this.thisVideo.srcObject = stream;
                        } else {
                            // 避免在新的浏览器中使用它，因为它正在被弃用。
                            _this.thisVideo.src = window.URL.createObjectURL(stream);
                        }
                        _this.thisVideo.onloadedmetadata = function (e) {
                            _this.thisVideo.play();
                        };
                    })
                    .catch((err) => {
                        this.$message({
                            message: "没有开启摄像头权限或浏览器版本不兼容",
                            type: "warning",
                        });
                    });
            });
        },


        // 打开串口，并且传输数据
        async openSerial() {


            this.openCamera();

            const port = await navigator.serial.requestPort();
            await port.open({ baudRate: 115200 }); // set baud rate
            const keepReading = true;
            const reader = port.readable.getReader();
            while (port.readable && keepReading) {
                try {
                    while (true) {
                        const { value, done } = await reader.read("\n");
                        if (done) {
                            // Allow the serial port to be closed later.
                            reader.releaseLock();
                            // Allow the serial port to be closed later.
                            // writer.releaseLock();
                            break;
                        }

                        if (value) {
                            const str = String.fromCharCode(...value);
                            receivedData += str;

                            let index = receivedData.indexOf("\n");
                            if (index !== -1) {
                                var new_Data = receivedData.substring(0, index);

                                new_Data = new_Data.split("\r")[0];
                                new_Data = new_Data.split(" ").map((num) => parseInt(num));

                                var temp = new_Data[0];
                                new_Data[0] = new_Data[2];
                                new_Data[2] = temp;
                                // new_Date ->  距离-角度-质量

                                Wu_data.shift();
                                Wu_data.push(new_Data);
                                myChart_Wu.setOption({
                                    series: [
                                        {
                                            data: Wu_data,
                                        },
                                    ],
                                });
                                receivedData = receivedData.substring(index + 1);



                                // console.log("输入一条获取的数据");
                                this.$refs.child.Set_DY_Data(new_Data[3]);
                                this.$refs.child1.Set_DY_Data(
                                    new_Data[3] * 0.01,
                                    new_Data[4] * 0.01,
                                    new_Data[5] * 0.01
                                );
                            }
                        }
                    }
                } catch (error) {
                    // Handle non-fatal read error.
                    console.error(error);
                } finally {
                    console.log(port.readable, keepReading);
                }
            }
            // clearInterval(writeInt);
            await port.close();

        },
    },
};
</script>
<style>
.canvas {
    position: absolute;
}

.box {
    position: relative;
    width: 700px;
    /* 确保父元素的宽度足够 */
    height: 400px;
    /* 确保父元素的高度足够 */
}

.flex-container {
    display: flex;
    justify-content: space-between;
    /* // 在两个 card 之间平均分布空间 */
    /* flex-direction: column; 垂直布局 */
}

.flex-containers {
    display: flex;
    justify-content: space-between;
    /* 在两个 card 之间平均分布空间 */
    flex-direction: column;
    height: auto;
}

.clearfix {
    height: 20px;
}

.box-card {
    flex: 1;
    position: relative;
    height: 500px;
    width: 500px;
    background: rgba(255, 255, 255, 0.2);
    /* 背景颜色透明度 */
}

.box-card2 {
    flex: 1;
    position: relative;
    height: 800px;
    width: 800px;
    background: rgba(255, 255, 255, 0.2);
    /* 背景颜色透明度 */
}

#videoCamera {
    z-index: 2;
    /* 设置视频的z-index为1，位于canvas之下 */
    margin-left: 10%;
}

#canvasArrow {
    z-index: 3;
    /* 设置canvas的z-index为2，位于视频之上 */
}

.bm-view {
    margin-top: 20px;
    width: 100%;
    height: 800px;
}

#main2 {
    display: flex;
    align-items: center;
    /* 在垂直方向上居中显示 */
    justify-content: center;
    /* 在水平方向上居中显示 */
    font-size: 40px;
}

#main3 {
    flex-direction: column;
    display: flex;
    align-items: center;
    /* 在垂直方向上居中显示 */
    justify-content: center;
    /* 在水平方向上居中显示 */
    font-size: 40px;
    margin: auto;
}
/* 按钮样式 */
.button {
            display: inline-block;
            position: relative;
            z-index: 1;
            overflow: hidden;
            text-decoration: none;
            font-family: sans-serif;
            font-weight: 600;
            font-size: 2em;
            padding: 0.75em 1em;
            color: blue;
            border: 0.15em solid blue;
            border-radius: 2em;
            transition: 4s;
        }

        .button:before,
        .button:after {
            content: "";
            position: absolute;
            top: -1.5em;
            z-index: -1;
            width: 200%;
            aspect-ratio: 1;
            border: none;
            border-radius: 40%;
            background-color: rgba(0, 0, 255, 0.25);
            transition: 4s;
        }

        .button:before {
            left: -80%;
            transform: translate3d(0, 5em, 0) rotate(-340deg);
        }

        .button:after {
            right: -80%;
            transform: translate3d(0, 5em, 0) rotate(390deg);
        }

        .button:hover,
        .button:focus {
            color: white;
        }

        .button:hover:before,
        .button:hover:after,
        .button:focus:before,
        .button:focus:after {
            transform: none;
            background-color: rgba(0, 0, 255, 0.75);
        } 
</style>
